import Taro, {Component} from '@tarojs/taro'
import {View, Button }from "@tarojs/components";

export default class Result extends Component {
  constructor (props) {
    super(props)
    this.state = {
      out_trade_no: null,
      data: null
    }
  }

  componentDidMount () {
    const id = this.$router.params.id;
    console.log(id)
    if (id) {
      this.setState({
        out_trade_no: id
      }, () => {
        this.getOrder();
      })
    }
  }

  getOrder = () => {
    wx.cloud.callFunction({
      name: 'pay',
      data: {
        type: 'orderquery',
        data: {
          out_trade_no: this.state.out_trade_no
        }
      }
    }).then((res) => {
      if (res.result) {
        console.log(this.state.order)
        this.setState({
          order: res.result.data
        })
      }
    })
  }

  payOrder = () => {
    let orderQuery = this.state.order;
    let out_trade_no = this.state.out_trade_no;
    let _this = this;
    const {
      time_stamp,
      nonce_str,
      sign,
      sign_type,
      prepay_id,
      body,
      total_fee
    } = orderQuery;
    Taro.requestPayment({
      timeStamp: time_stamp,
      nonceStr: nonce_str,
      package: `prepay_id=${prepay_id}`,
      signType: 'MD5',
      paySign: sign
    }).then((res) => {
      Taro.showLoading({
        title: ' ',
      });
      Taro.showToast({
        title: ' ',
        icon: 'success',
        duration: 1500,
        success: () => {
          _this.getOrder();
          wx.cloud.callFunction({
            name: 'pay',
            data: {
              type: 'payorder',
              data: {
                body,
                prepay_id,
                out_trade_no,
                total_fee
              }
            }
          });
          Taro.hideLoading();
        }
      });
    }).catch((err) => {

    })
  }

  closeOrder = () => {
    Taro.showLoading({
      title: '正在关闭',
    });

    let out_trade_no = this.state.out_trade_no;

    wx.cloud.callFunction({
      name: 'pay',
      data: {
        type: 'closeorder',
        data: {
          out_trade_no
        }
      }
    }).then((res) => {
      console.log(res.result)
    });
    this.getOrder();
    Taro.hideLoading();
  }

  render () {
    if (!this.state.order) {
      return null
    }
    const { order } = this.state
    return (
      <View>
        <View className="weui-form-preView">
          <View className="weui-form-preView__hd" style="height:2.5em;">
            <View className="weui-form-preView__label">标价金额</View>
            <View className="weui-form-preView__value_in-hd">{order.fee_type} {order.total_fee}</View>
          </View>

          <View className="weui-form-preView__hd" style="height:2.5em;">
            <View className="weui-form-preView__label">现金支付金额</View>
            <View className="weui-form-preView__value_in-hd">{order.cash_fee}</View>
          </View>

          <View className="weui-form-preView__bd">
            <View className="weui-form-preView__item">
              <View className="weui-form-preView__label">商品信息</View>
              <View className="weui-form-preView__value">{order.body}</View>
            </View>

            <View className="weui-form-preView__item">
              <View className="weui-form-preView__label">交易类型</View>
              <View className="weui-form-preView__value">{order.trade_type}</View>
            </View>
            <View className="weui-form-preView__item">
              <View className="weui-form-preView__label">交易状态</View>
              <View className="weui-form-preView__value">{order.trade_state}</View>
            </View>
            <View className="weui-form-preView__item">
              <View className="weui-form-preView__label">付款银行</View>
              <View className="weui-form-preView__value">{order.bank_type}</View>
            </View>
            <View className="weui-form-preView__item">
              <View className="weui-form-preView__label">商户订单号</View>
              <View className="weui-form-preView__value">
                {order.out_trade_no}
              </View>
            </View>
            <View className="weui-form-preView__item">
              <View className="weui-form-preView__label">支付完成时间</View>
              <View className="weui-form-preView__value">
                {order.time_end}
              </View>
            </View>
            <View className="weui-form-preView__item">
              <View className="weui-form-preView__label">交易状态描述</View>
              <View className="weui-form-preView__value">
                {order.trade_state_desc}
              </View>
            </View>
          </View>
        </View>
        {
          order.trade_state==='NOTPAY' ?
            <View>
              <Button
                type="primary"
                onClick={this.payOrder.bind(this)} >
              支付
              </Button>
            </View> :
            <View>
              <Button
                type="warn"
                onClick={this.closeOrder.bind(this)}
                >
                  取消订单
              </Button>
            </View>
        }
      </View>
    );
  }
}
